﻿
@{
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<body>
    <style>
        .imgbox {
            padding-top: 10px;
        }

        .imgbox_li {
            display: inline-block;
            vertical-align: top;
            width: 125px;
            height: 125px;
            position: relative;
            margin-bottom: 10px;
            box-sizing: border-box;
            padding: 5px
        }

            .imgbox_li img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover
            }

        .close {
            position: absolute;
            top: 0;
            right: 0;
            padding: 4px;
            cursor: pointer;
            font-size: 24px !important;
        }

            .close:hover {
                color: #ff0000;
            }
    </style>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form" lay-filter="example">
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        <span class="x-red">*</span>
                        图片上传
                        <p class="x-red">500*500</p>
                    </label>
                    <div class="layui-input-block">
                        <div>
                            <label>
                                <div  class="layui-btn layui-btn-lg">点击上传</div>
                                <input type="file" onchange="upper(event)" style="display:none" name="file" accept="image/*" multiple value="" />
                            </label>
                        </div>
                        <div class="imgbox">
                            @foreach (var m in Model.image)
                            { 
                            <div class="imgbox_li">
                                <a href="@m" target="_blank">
                                    <img src="@m" />
                                </a>
                                <i class="close layui-icon layui-icon-close-fill" onclick="closeimg(this)" title="删除"></i>
                            </div>
                            }
                        </div>
                        <input style="height:38px;" type="hidden" name="images" value="@Model.images" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>
                        标题
                    </label>
                    <div class="layui-input-inline">
                        <input style="height:38px;" type="text" name="title" value="@Model.title" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        <span class="x-red">*</span>
                        QQ号
                    </label>
                    <div class="layui-input-inline">
                        <input style="height:38px;" type="text" required  value ="@Model.qq"  lay-verify="required" name="qq" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        排序
                    </label>
                    <div class="layui-input-inline">
                        <input style="height:38px;" type="text" name="sork" value="@Model.sork" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        备注
                    </label>
                    <div class="layui-input-inline">
                        <input style="height:38px;" type="text" value="@Model.remark" name="remark" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        是否启用
                    </label>
                    <div class="layui-input-inline" style="line-height: 38px;">
                        <input type="checkbox" @(Model.Static == 1 ? "checked" : "")  name="Static" value="1" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>
                        内容
                    </label>
                </div>
                <div class="editor-area">
                    <div>
                        <script id="editor" type="text/plain">
                        </script>
                    </div>
                </div>
                @Html.AntiForgeryToken();
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-lg" style="display:block;margin:auto" lay-filter="add" lay-submit="">
                        修改
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script>
            //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor', {
           initialFrameWidth: 'auto',
            initialFrameHeight: 600,
            autoHeightEnabled: false,
            autoFloatEnabled:false
        });
        ue.ready(function () {
            ue.setContent('@Html.Raw(Model.content)')
        })
             function closeimg(obj) {
                var index = $(obj).parent(".imgbox_li").index();
                 var v = $("input[name=images]").val().split(",");
                 v.splice(index, 1);
                 console.log(v.length)
                 if (v.length >= 1) {
                     $("input[name=images]").val(v.join(","))
                 } else {
                     $("input[name=images]").val("")
                 }
                 $(obj).parent().remove();
            }
        function upper(event) {

            upload(event.target.files);
        }
        //递归上传
        function upload(files) {
            var $html = '<div class="imgbox_li"><a href="{href}" target="_blank" ><img src="{img}"  /></a><i class="close layui-icon layui-icon-close-fill" onclick="closeimg(this)" title="删除"></i></div>';
            if (files.length <= 0) {
                layer.alert("请上传图片");
            } else {
                var array = [];
                for (var i = 0; i < files.length; i++) {
                    array.push(files[i])
                }
                var formData = new FormData();
                formData.append('file', array[0])
                $.ajax({
                    url: '/Admin/homepage/UploadFile',
                    data: formData ,
			        type: "post",
			        async:true,
                    dataType: 'json',
                    processData: false,
			        contentType: false,
                    success: function (data) {
                        $html = $html.replace("{href}", data.data);
                        $html = $html.replace("{img}", data.data);
                        $(".imgbox").append($html);
                        var v = $("input[name=images]").val();
                        if (v == "") {
                            $("input[name=images]").val(data.data);
                        } else {
                            $("input[name=images]").val(v + "," +data.data);
                        }

                    },
			        error:function(xhr,errorText,errorType){
                         alert("error");
                    },
                    complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                        array.shift();
                        if (array.length>=1) {
                            upload(array)
                        }
			        }
		        })
            }
        }

        layui.use(['form', 'layer','element'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer
                form.on('switch(switchTest)', function(data){
                    if (!this.checked) {
                        layer.tips('关闭后前台将不展示本数据', data.othis)
                    }
                    var Static = this.checked ? '1' : '0';
                    $("input[name=Static]").val(Static)
                });
                //监听提交
                form.on('submit(add)',
                    function (data) {
                        if ($("input[name=images]").val() == "") {
                            layer.msg("请上传图片", { icon: 0, time: 2000 });
                            return false;
                        }
                    var dataf = data.field;
                        dataf["content"] = dataf.editorValue;
                    $.ajax({
                        url: '@Url.Action("EditProduct","Product",new { area="Admin"})',
                        data: dataf,
			            type: "post",
			            async:true,
			            dataType: 'json',
                        success: function (data) {
                            if (data.code == 200) {
                                //发异步，把数据提交给php
                                layer.alert(data.result, {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                            } else {
                                 layer.msg(data.result, { icon: 0, time: 2000 });
                            }
                        },
			            error:function(xhr,errorText,errorType){
                             alert("error");
                        },
			            complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
				            if(status=='timeout'){
					            ajax.abort();
					            alert("请求超时");
				            }
			            }
		            })

                    return false;
                });

            });
    </script>
</body>
